<template>
  <!-- 查看详情 2018/3/7 11:44 zhangQ -->
  <div>
    <div>
      <Tabs :animated="false" v-model="currentName">
        <TabPane label="运单详情" name="1">
        </TabPane>
        <!--<TabPane label="主运单详情" name="2">-->
        <!--</TabPane>-->
<!--         <TabPane label="轨迹跟踪" name="3">
        </TabPane> -->
<!--         <TabPane label="通知记录" name="4">
        </TabPane> -->
      </Tabs>

      <!--运单详情-->
      <keep-alive>
        <div v-show="currentName=='1'">
          <Row>
            <i-col span="4">
              <Button type="primary" @click="dispatchMode=!dispatchMode"
                v-if="Boolean(!currentMainOrder.assignmentTime)">{{ dispatchMode?'已派单列表':'派单列表' }}
              </Button>
              <Button type="error" v-show="dispatchMode" @click="dispatchOrderToFleet"
                v-if="Boolean(!currentMainOrder.assignmentTime)">派单
              </Button>
            </i-col>
            <i-col span="20">
              <Form v-if="dispatchMode" ref="subOrderTabParam" :model="subOrderTabParam" label-position="right" inline>
                <FormItem label="业务类型" style="margin-left: 10px;">
                  <Select v-model="subOrderTabParam.transportType" filterable placeholder="选择业务类型" style="width: 80px">
                    <Option v-for="item in transportTypeList" :value="item.val" :key="item.val">{{ item.label }}
                    </Option>
                  </Select>
                </FormItem>
                <FormItem>
                  <Input type="text" v-model="subOrderTabParam.waybillNo" placeholder="货票号"></Input>
                </FormItem>
                <FormItem>
                  <Input type="text" v-model="subOrderTabParam.containerNo" placeholder="集装箱号"></Input>
                </FormItem>
                <FormItem>
                  <Input type="text" v-model="subOrderTabParam.receiver" placeholder="收货人"></Input>
                </FormItem>
                <FormItem>
                  <Button type="primary" @click="handleSearch" icon="ios-search">
                    查询
                  </Button>
                </FormItem>
              </Form>
            </i-col>
          </Row>
          <div v-show="dispatchMode">
            <Table ref="subOrderTab" :columns="subOrderColumn" border :data="subOrderData" :height="subOrderTabHeight"
              @on-selection-change="subOrderTabSelectChange"></Table>
          </div>
          <div style="margin-top: 15px" v-if="!dispatchMode">
            <dispatchedList v-if="!dispatchMode" :currentMainOrder="currentMainOrder"></dispatchedList>
          </div>
        </div>
      </keep-alive>

      <!--<keep-alive>-->
      <!--&lt;!&ndash;主运单详情&ndash;&gt;-->
      <!--<div v-show="currentName=='2'">-->
      <!--<Steps :current="0" direction="vertical">-->
      <!--<template v-for="(item,index) in positionList">-->
      <!--<Step :title="item.info" :content="item.time"></Step>-->
      <!--</template>-->
      <!--</Steps>-->
      <!--</div>-->
      <!--</keep-alive>-->

      <!--轨迹跟踪-->
<!--       <keep-alive>
        <div v-show="currentName=='3'" style="max-height: 450px;overflow: auto">
          <Steps :current="0" direction="vertical">
            <template v-for="(item,index) in positionList">
              <Step :title="positionList.length-index+' '+item.info" :content="item.time"
                icon="android-radio-button-on"></Step>
            </template>
          </Steps>
        </div>
      </keep-alive> -->

      <!--通知记录-->
      <keep-alive>
        <div v-show="currentName=='4'">
          <tablePage ref="noticeRecordTab" :staticData="noticeRecordData" :isStartLoad="false" :mode="1">
            <template slot-scope="props">
              <Table :columns="noticeRecordColumn" border :data="props.data" @on-sort-change="props.sortChange"></Table>
            </template>
          </tablePage>
        </div>
      </keep-alive>

      <!-- 选择车队，要派单了 -->
      <xlinkModal v-model="operatModal.dispatchModalShow" className="vertical-center-modal" title="分组派单" width="700">
        <dispatchToFleet v-if="operatModal.dispatchModalShow" @close="operatModal.dispatchModalShow = false"
          @assignment="assignmentToFleetForGrpoup"></dispatchToFleet>
      </xlinkModal>

    </div>
  </div>
</template>

<script>
  import { querySubOrderByMainOrder, getNoticeListByMainOrderNo, dispatchToFleetOrder2 } from '@api/backEnd/mainOrder'
  import tablePage from '@components/table/tablePage.vue'
  import dispatchedList from './dispatchedList'
  import { mapGetters } from 'vuex'
  import _ from 'lodash'
  import moment from 'moment'
  import xlinkModal from '@components/modal/xlinkModal'
  import dispatchToFleet from './dispatchToFleet'
  import { getTrainTypeCN } from './fleetDispatch/components/trainTypeEnum'

  export default {
    name: 'view-detail',
    data () {
      let transportTypeList = [
        { label: '全部', val: '' },
        { label: '门到门', val: '1' },
        { label: '门到站', val: '2' },
        { label: '站到门', val: '3' },
        { label: '站到站', val: '4' }
      ]
      let subOrderTabParam = {
        waybillNo: '',
        containerNo: '',
        receiver: '',
        transportType: ''
      }
      let subOrderColumn = [
        {
          title: '车序',
          key: 'sort',
          width: 60,
          fixed: 'left'
        },
        // {
        //   type: 'index',
        //   width: 60,
        //   fixed: 'left'
        // },
        {
          type: 'selection',
          width: 60,
          align: 'center',
          fixed: 'left'
        },
        {
          title: '联运子运单号',
          key: 'orderNo',
          width: 200,
          fixed: 'left'
        },
        {
          title: '货票号',
          key: 'waybillNo',
          width: 100,
          fixed: 'left'
        },
        {
          title: '车号',
          key: 'trainNumber',
          width: 100,
          fixed: 'left'
        },
        {
          title: '火车车种类型',
          ellipsis: 'false',
          width: 150,
          render: (h, params) => {
            let trainType = params.row.trainType
            let trainTypeCN = getTrainTypeCN(trainType)
            return (<span>{trainTypeCN}</span>)
          }
        },
        // {
        //   title: '箱号字母',
        //   key: 'containerNoHead',
        //   width: 85
        // },
        {
          title: '业务类型',
          key: 'transportType',
          width: 150,
          render: (h, params) => {
            let transportType = params.row.transportType
            let transportTypeW = ''
            if (transportType === 1) {
              transportTypeW = '门到门'
            } else if (transportType === 2) {
              transportTypeW = '门到站'
            } else if (transportType === 3) {
              transportTypeW = '站到门'
            } else if (transportType === 4) {
              transportTypeW = '站到站'
            }
            return (<span>{transportTypeW}</span>)
          }
        },
        {
          title: '箱号',
          key: 'containerNoBody',
          width: 150,
          render: (h, params) => {
            let containerNo = params.row.containerNoHead + params.row.containerNoBody
            return (<span>{containerNo}</span>)
          }
        },
        {
          title: '发站',
          key: 'startStationName',
          width: 150
        },
        {
          title: '发出时间',
          width: 150,
          sortable: true,
          render: (h, params) => {
            let thisdata = this.currentMainOrder.startStationTime
            thisdata = thisdata ? moment(thisdata).format('YYYY-MM-DD HH:mm') : ''
            return (<span>{thisdata}</span>)
          }
        },
        {
          title: '货票重量',
          key: 'zkzzl00',
          width: 100
        },
        {
          title: '收货人',
          key: 'zkshrmc',
          width: 250
        },
        {
          title: '发货人',
          key: 'zkfhrmc',
          width: 250
        },
        {
          title: '发接取送达费',
          key: 'zkjf017',
          width: 100
        },
        {
          title: '到接取送达费',
          key: 'zkjf018',
          width: 100
        },
        {
          title: '品名',
          key: 'zkpmhz0',
          width: 100
        }
      ]
      if (this.currentMainOrder.assignmentTime) {
        subOrderColumn = [
          {
            type: 'index',
            width: 60,
            fixed: 'left'
          },
          {
            title: '联运子运单号',
            key: 'orderNo',
            width: 200,
            fixed: 'left'
          },
          {
            title: '货票号',
            key: 'waybillNo',
            width: 100,
            fixed: 'left'
          },
          {
            title: '车号',
            key: 'trainNumber',
            width: 100,
            fixed: 'left'
          },
          {
            title: '火车车种类型',
            ellipsis: 'false',
            width: 150,
            render: (h, params) => {
              let trainType = params.row.trainType
              let trainTypeCN = getTrainTypeCN(trainType)
              return (<span>{trainTypeCN}</span>)
            }
          },
          {
            title: '箱号字母',
            key: 'containerNoHead',
            width: 85
          },
          {
            title: '箱号',
            key: 'containerNoBody',
            width: 100
          },
          {
            title: '发站',
            key: 'startStationName',
            width: 150
          },
          {
            title: '业务类型',
            key: 'transportType',
            width: 150,
            render: (h, params) => {
              let transportType = params.row.transportType
              let transportTypeW = ''
              if (transportType === 1) {
                transportTypeW = '门到门'
              } else if (transportType === 2) {
                transportTypeW = '门到站'
              } else if (transportType === 3) {
                transportTypeW = '站到门'
              } else if (transportType === 4) {
                transportTypeW = '站到站'
              }
              return (<span>{transportTypeW}</span>)
            }
          },
          {
            title: '发出时间',
            width: 150,
            render: (h, params) => {
              let thisdata = this.currentMainOrder.startStationTime
              thisdata = thisdata ? moment(thisdata).format('YYYY-MM-DD HH:mm') : ''
              return (<span>{thisdata}</span>)
            }
          },
          {
            title: '货票重量',
            key: 'zkzzl00',
            width: 100
          },
          {
            title: '收货人',
            key: 'zkshrmc',
            width: 250
          },
          {
            title: '发货人',
            key: 'zkfhrmc',
            width: 250
          },
          {
            title: '接取费',
            key: 'zkjf017',
            width: 100
          },
          {
            title: '送达费',
            key: 'zkjf018',
            width: 100
          },
          {
            title: '品名',
            key: 'zkpmhz0',
            width: 100
          }
        ]
      }
      let noticeRecordColumn = [
        {
          title: '车队名称',
          ellipsis: 'false',
          key: 'fleetName'
        },
        {
          title: '送货地址',
          ellipsis: 'false',
          key: 'addresses'
        }
      ]
      let subOrderData = []
      let positionList = []
      let noticeRecordData = []
      let currentName = '1'
      let subOrderTabHeight = 550
      let pageSizeOpts = [150, 100, 50]
      let currentCheckeds = []
      let dispatchMode = true
      let operatModal = { dispatchModalShow: false }
      let datas = {
        transportTypeList,
        subOrderTabParam,
        currentName,
        subOrderColumn,
        subOrderData,
        positionList,
        noticeRecordColumn,
        noticeRecordData,
        subOrderTabHeight,
        pageSizeOpts,
        operatModal,
        currentCheckeds,
        dispatchMode
      }
      return datas
    },
    props: {
      currentMainOrder: {
        type: Object,
        default () {
          return {}
        }
      }
    },
    computed: {
      ...mapGetters(['currentUser', 'activeMenu'])
    },
    methods: {
      handleSearch () {
        this.getSubOrderData()
        this.currentCheckeds = []
      },
      /**
       * TODO(场站派单给车队)
       * @auther zhangQ
       * @date 2018/6/12 14:53
       */
      dispatchOrderToFleet () {
        if (this.currentCheckeds.length > 0) {
          this.operatModal.dispatchModalShow = true
        } else {
          this.$Notice.warning({
            title: '警告',
            desc: '请选择子运单'
          })
        }
      },
      /**
       * TODO(向服务器发送)
       * @auther zhangQ
       * @date 2018/6/13 7:42
       */
      assignmentToFleetForGrpoup (assignmentForm, fleetList) {
        console.log('stationLogisticsMonitoring')
        console.log(' assignmentToFleetForGrpoup (assignmentForm, fleetList)')
        let assignmentFormClone = _.cloneDeep(assignmentForm)
        if (!(assignmentFormClone.checkTrackName.length > 0)) {
          this.$Notice.warning({
            title: '错误',
            desc: '车队必选'
          })
          return
        }
        let maps = []
        assignmentFormClone.checkTrackName.forEach((item) => {
          let fleetName = _.find(fleetList, (fleetNameItem) => {
            return fleetNameItem.id === item
          })
          let mapsDeatil = []
          this.currentCheckeds.forEach((subOrderItem) => {
            let subOrderObj = {
              subOrderId: subOrderItem.orderNo,
              waybillId: subOrderItem.waybillId,
              waybillNo: subOrderItem.waybillNo,
              weight: subOrderItem.zkzzl00,
              pm: subOrderItem.zkpmhz0,
              shipper: subOrderItem.zkfhrmc,
              receiver: subOrderItem.zkshrmc,
              outContacts: assignmentFormClone.contacts,
              userAddressId: assignmentFormClone.userAddressId,
              memo: assignmentFormClone.outMemo,
              outMobile: assignmentFormClone.contactsMobile,
              outAddress: assignmentFormClone.address,
              kilometreNum: assignmentFormClone.kilometreNumber,
              containerNo: subOrderItem.containerNoHead + subOrderItem.containerNoBody,
              containerHead: subOrderItem.containerNoHead,
              containerBody: subOrderItem.containerNoBody,
              trainType: subOrderItem.trainType,
              transportType: subOrderItem.transportType,
              receiveFee: subOrderItem.zkjf017,
              deliverFee: subOrderItem.zkjf018,
              orgId: fleetName.id,
              orgName: fleetName.login_name
            }
            mapsDeatil.push(subOrderObj)
          })
          let obj = {
            dispatchOrgId: this.currentUser.userId,
            dispatchOrgName: this.currentUser.loginName,
            orgId: fleetName.id,
            orgName: fleetName.login_name,
            dispatchType: 2, // 分组派单
            mainOrderNo: this.currentMainOrder.orderNo,
            startStationCode: this.currentMainOrder.startStationCode,
            startStationName: this.currentMainOrder.startStationName,
            endStationCode: this.currentMainOrder.endStationCode,
            endStationName: this.currentMainOrder.endStationName,
            isContainer: this.currentMainOrder.isContainer,
            paraPositionTrack: assignmentFormClone.paraPositionTrack,
            estimateArriveTime: assignmentFormClone.estimateArriveTime,
            paraPositionTime: assignmentFormClone.estimateArriveTime,
            xlFleetOrderDetails: mapsDeatil
          }
          maps.push(obj)
        })
        // 开始发送
        let xlFleetOrderList = maps
        let param = { xlFleetOrderList }
        dispatchToFleetOrder2(param).then(res => {
          if (+res.data.isSuccess === 1) {
            this.$Notice.success({
              title: '成功',
              desc: '派单成功'
            })
            this.getSubOrderData()
            this.currentCheckeds = []
            this.operatModal.dispatchModalShow = false
            this.$emit('dispatchTofleetDataRefresh')
          } else {
            this.$Notice.error({
              title: '警告',
              desc: '派单失败'
            })
          }
        })
      },
      subOrderTabSelectChange (rows) {
        this.currentCheckeds = rows
      },
      onSortChange () {
      },
      /**
       * TODO(获得子运单信息)
       * @auther zhangQ
       * @date 2018/3/16 15:40
       **/
      getSubOrderData () {
        if (!(this.currentMainOrder && this.currentMainOrder.orderNo)) {
          return
        }
        let param = {
          MainOrderNo: this.currentMainOrder.orderNo,
          waybillNo: this.subOrderTabParam.waybillNo,
          containerNo: this.subOrderTabParam.containerNo,
          receiver: this.subOrderTabParam.receiver,
          transportType: this.subOrderTabParam.transportType
        }
        querySubOrderByMainOrder(param).then(res => {
          if (res.data.isSuccess === 1) {
            let subData = []
            res.data.data.sub.forEach((item) => {
              if (item.dispatchTime) {
                item['_disabled'] = true
              } else {
                subData.push(item)
              }
            })
            this.subOrderData = subData
            this.positionList = res.data.data.position
            if (this.subOrderData && this.subOrderData > 0) {
              this.subOrderTabHeight = 500
            }
          } else {
            Promise.reject(new Error(res.data.res))
          }
        }).catch((err) => {
          console.log('接口getOrderDetail:' + err)
        })
      },
      getNoticeListByMainOrderNo () {
        let param = {
          orderNo: this.currentMainOrder.orderNo
        }
        getNoticeListByMainOrderNo(param).then(res => {
          if (res.data.isSuccess === 1) {
            this.noticeRecordData = res.data.data
          }
        })
      }
    },
    mounted () {
      this.getSubOrderData()
      this.getNoticeListByMainOrderNo()
    },
    components: { tablePage, xlinkModal, dispatchToFleet, dispatchedList }
  }
</script>
